import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:kkhousekeep/page/me/member_detail_controller.dart';
import 'package:kkhousekeep/widget/custom_button.dart';
import 'package:kkhousekeep/widget/custom_table.dart';
import 'package:kkhousekeep/widget/dash_decoration.dart';

import '../../widget/custom_app_bar.dart';
import '../../widget/custom_form_textfield.dart';

class MemberDetail extends StatelessWidget {
  const MemberDetail({super.key});

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MemberDetailController>(
      init: MemberDetailController(),
      builder: (controller) => Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: const Color(0xFFf4f5f6),
        appBar: CustomAppBar("成员详情",
            actions: !controller.isAddNewUser
                ? [_buildAppBarNotificationBtn(controller)]
                : null),
        body: GestureDetector(
          onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
          child: SafeArea(
            left: false,
            right: false,
            child: Obx(
              () => Column(
                children: [
                  Container(
                    margin: EdgeInsets.only(top: 16.h),
                    color: Colors.white,
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        _buildDetail(context, controller),
                        _buildPersonalPhoto(controller)
                      ],
                    ),
                  ),
                  const Spacer(),
                  Visibility(
                    visible: controller.isEditMode.value,
                    child: CustomButton(
                      isAsh: controller.isButtonAsh.value,
                      text: "保存",
                      width: 420.w,
                      height: 90.h,
                      onPressed: () {
                        controller.save();
                      },
                    ).marginOnly(bottom: 60.h),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildPersonalPhoto(MemberDetailController controller) {
    return controller.image.value.isNotEmpty
        ? Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.only(top: 16.h),
            child: InkWell(
              child: Container(
                alignment: Alignment.centerLeft,
                width: 180.w,
                height: 252.h,
                decoration: BoxDecoration(
                  border:
                      Border.all(color: const Color(0x33000000), width: 2.r),
                  borderRadius: BorderRadius.circular(12.r),
                  image: DecorationImage(
                    fit: BoxFit.fill,
                    image: CachedNetworkImageProvider(controller.image.value),
                  ),
                ),
              ),
              onTap: () {
                if (!controller.isEditMode.value) {
                  return;
                }
                controller.uploadImage();
              },
            ),
          ).marginOnly(left: 32.w, bottom: 30.h)
        : Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.only(top: 16.h),
            child: InkWell(
              child: Container(
                width: 180.w,
                height: 252.h,
                decoration: DashDecoration(
                  pointWidth: 2,
                  span: 4,
                  step: 8,
                  radius: Radius.circular(12.r),
                  gradient: const SweepGradient(
                      colors: [Color(0x33000000), Color(0x33000000)]),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.add,
                      size: 36.w,
                      color: const Color(0XFF979797),
                    ),
                    SizedBox(
                      height: 22.h,
                    ),
                    Text(
                      "上传图片",
                      style: TextStyle(
                          fontSize: 24.sp, color: const Color(0xFFC6C9CC)),
                    ),
                  ],
                ),
              ).marginOnly(left: 32.w, bottom: 30.h),
              onTap: () {
                if (!controller.isEditMode.value) {
                  return;
                }
                controller.uploadImage();
              },
            ),
          );
  }

  Widget _buildDetail(
      BuildContext buildContext, MemberDetailController controller) {
    return CustomTable(
      children: [
        TableRow(children: [
          CustomTable.buildFormTitle("姓名"),
          Obx(
            () => CustomFormTextField(
                controller: controller.nameTextEditController,
                enable: controller.isEditMode.value,
                hintText: "请填写成员姓名"),
          ),
        ]),
        TableRow(children: [
          CustomTable.buildFormTitle("性别"),
          Obx(
            () => CustomTable.buildSelection(
                enable: controller.isEditMode.value,
                text: controller.gender.value,
                hintText: "请选择性别",
                onTap: () => controller.showGenderPicker()),
          )
        ]),
        TableRow(children: [
          CustomTable.buildFormTitle("证件类型"),
          Obx(
            () => CustomTable.buildSelection(
              enable: controller.isEditMode.value,
              text: controller.identificationType.value,
              hintText: "请选择证件类型",
              onTap: () => controller.showIdentificationPick(),
            ),
          ),
        ]),
        TableRow(
          children: [
            CustomTable.buildFormTitle("证件号码"),
            Obx(
              () => CustomFormTextField(
                controller: controller.identificationNumberTextEditController,
                enable: controller.isEditMode.value,
                hintText: "请填写证件号码",
                isShowClearBtn: controller
                    .identificationNumberTextEditController.text.isNotEmpty,
                inputFormatters: [LengthLimitingTextInputFormatter(18)],
              ),
            )
          ],
        ),
        TableRow(
          children: [
            CustomTable.buildFormTitle("电话"),
            Obx(
              () => CustomFormTextField(
                controller: controller.phoneTextEditController,
                enable: controller.isEditMode.value,
                hintText: "请填写手机号码",
                textInputType: TextInputType.phone,
                inputFormatters: [LengthLimitingTextInputFormatter(11)],
              ),
            )
          ],
        ),
        TableRow(
          children: [
            CustomTable.buildFormTitle("与房主关系"),
            Obx(
              () => CustomTable.buildSelection(
                enable: controller.isEditMode.value,
                text: controller.relationship.value,
                hintText: "请选择关系",
                onTap: () => controller.showRelationPicker(),
              ),
            ),
          ],
        ),
        TableRow(children: [CustomTable.buildFormTitle("上传个人照片"), Container()])
      ],
    );
  }

  Widget _buildAppBarNotificationBtn(MemberDetailController controller) {
    return TextButton(
      onPressed: () => {controller.isEditMode.value = true},
      child: Image(
        image: const AssetImage('assets/images/icon_member_info_edit.png'),
        width: 48.h,
        height: 48.h,
        fit: BoxFit.contain,
      ),
    );
  }
}
